<!-- 前台页面 footer 组件 -->
<template>
  <div class="walletFooterWrapper">
    <div class="walletFooter">

      <!-- 接口与对接 -->
      <!-- <div class="interAndConnect">

        <div class="section">
          <p class="subTil">
            {{ $t('mainFooter.ReWithAPI') }}
          </p>
          <ul>
            <li>
              <a href="javascript:;">
                {{ $t('mainFooter.BTCAPI') }}
              </a>
            </li>
            <li>
              <a href="javascript:;">
                {{ $t('mainFooter.ERC20API') }}
              </a>
            </li>
            <li>
              <a href="javascript:;">
                {{ $t('mainFooter.USDTOMNAPI') }}
              </a>
            </li>
            <li>
              <a href="javascript:;">
                {{ $t('mainFooter.ETHAPI') }}
              </a>
            </li>
          </ul>
        </div>

        <div class="section">
          <p class="subTil">
            {{ $t('mainFooter.WalletDocking') }}
          </p>
          <ul>
            <li>
              <a href="javascript:;">
                {{ $t('mainFooter.BTCWallet') }}
              </a>
            </li>
            <li>
              <a href="javascript:;">
                {{ $t('mainFooter.ERC20Wallet') }}
              </a>
            </li>
            <li>
              <a href="javascript:;">
                {{ $t('mainFooter.USDTWallet') }}
              </a>
            </li>
            <li>
              <a href="javascript:;">
                {{ $t('mainFooter.ETHWallet') }}
              </a>
            </li>
          </ul>
        </div>

      </div> -->

    </div>

    <!-- 空格 box -->
    <!-- <div class="box"></div> -->

    <div class="walletFooter">
      <!-- 品牌信息 -->
      <div class="brand">

        <LogoAndCopyright></LogoAndCopyright>

      </div>
    </div>



  </div>
</template>

<script setup>
import LogoAndCopyright from "@/components/common/LogoAndCopyright.vue";
</script>

<style lang="less" scoped>
/*
  默认的通用样式，应该写在 App.vue -- start
*/
* {
  margin: 0;
  padding: 0;
}

a {
  color: #000;
  text-decoration: none;
}

li {
  list-style: none;
}

/*
  默认的通用样式，应该写在 App.vue -- end
*/

/* -------------------- 前台页面 footer 组件 -------------------- */
.walletFooterWrapper {
  border-top: 1px solid #eee;

  .walletFooter {
    width: 10.24rem;
    margin: 0 auto;

    /* ---------- 接口与对接 ---------- */
    .interAndConnect {
      display: flex;
      justify-content: space-evenly;

      .section {
        padding-top: 0.5rem;
        padding-bottom: 0.5rem;
        text-align: left;

        .subTil {
          color: #999;
          padding-bottom: 0.1rem;
        }

        ul li {
          padding-top: 0.025rem;
          padding-bottom: 0.025rem;
        }

      }

    }

    /* ---------- 品牌信息 ---------- */
    .brand {
      padding-top: 0.5rem;
      padding-bottom: 0.5rem;
    }

  }

  /* ---------- 空格 box ---------- */
  .box {
    height: 0.5rem;
    border-top: 1px solid #eee;
    border-bottom: 1px solid #eee;
  }

}

/* h5 适配样式：当视口宽度小于 600px 时 */
@media (max-width: 600px) {
  .walletFooterWrapper {
    border-top: 1px solid #eee;

    .walletFooter {
      width: 100%;
      margin: 0 auto;

      /* ---------- 接口与对接 ---------- */
      .interAndConnect {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-evenly;

        .section {
          width: 80%;
          padding-top: 0.2rem;
          padding-bottom: 0.2rem;
          text-align: left;

          .subTil {
            color: #999;
            padding-bottom: 0.1rem;
          }

          ul li {
            padding-top: 0.025rem;
            padding-bottom: 0.025rem;
          }

        }

      }

      /* ---------- 品牌信息 ---------- */
      .brand {
        padding-top: 0.5rem;
        padding-bottom: 0.5rem;
      }

    }

    /* ---------- 空格 box ---------- */
    .box {
      height: 0rem;
      border-top: 0px solid #eee;
      border-bottom: 1px solid #eee;
    }

  }

}
</style>